<template>
    <div class="PetDetail">
        <span class="My_history" onclick="javascript:history.go(-1)">
            返回
        </span>
        <div class="descPet">
            <div class="ImgDesc" style="text-align: center;">
                <img :src="SrcImg" />
            </div>
            <div class="textDesc">
                <el-descriptions
                    class="margin-top"
                    title="主要信息"
                    :column="3"
                    :size="size"
                    border
                    :style="blockMargin"
                >
                    <el-descriptions-item label="姓名">{{basicPet.pname}}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{basicPet.page}}</el-descriptions-item>
                    <el-descriptions-item label="价格">{{basicPet.price}}</el-descriptions-item>
                    <el-descriptions-item label="种类">
                        <el-tag size="small">{{basicPet.pkind}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="性别">
                        <span v-if="basicPet.psex==0">雄</span>
                        <span v-else>雌</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="是否接种疫苗">{{basicPet.isVaccine}}</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <span v-if="basicPet.status==0">不正常</span>
                        <span v-else-if="basicPet.status==1">不确定</span>
                        <span v-else-if="basicPet.status==2">生病</span>
                        <span v-else-if="basicPet.status==3">正常</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="时间">{{basicPet.createTime}}</el-descriptions-item>
                    <el-descriptions-item label="描述">
                        {{basicPet.describe}}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>
<script>

import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 

export default defineComponent({
    data(){
        return{
            basicPet:null,
            userMessage:null,
            SrcImg:''
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.basicPet = this.store.state.basicPet;
        this.userMessage = this.store.state.UserMessage;
        this.SrcImg = this.basicPet.pimageBase64;
    }
})
</script>
<style scoped>
    .My_history{
        color: #666;
        display: inline-block;
        cursor: pointer;
        margin: 0 40px 0 10px;
    }
    .descPet{
        width: 100%;
        height: 100%;
        margin-top: 10px;
    }
    .ImgDesc img{
        width: 200px;
    }
    .textDesc{
        margin-top: 20px;
    }
</style>